<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./javascripts/tools.js"></script>
    <script>
        function init() {
            //获取当前 url中的type参数
            let cur_url = new URL(window.location.href);
            let type = cur_url.searchParams.get("type");
            let id = cur_url.searchParams.get("id")
            let form = document.getElementById("form");
            form.action = "/data/update_character?type=" + type + "&id=" + id
            let url = "/data/query?type=" + type + "&id=" + id;
            let xhr = new XMLHttpRequest();
            xhr.open("GET", url, true);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    let data = JSON.parse(xhr.responseText)[0];
                    document.getElementsByName("name")[0].value = data.name;
                    document.getElementsByName("title")[0].value = data.title;
                    document.getElementsByName("description")[0].value = data.description;
                    document.getElementsByName("text_avatar")[0].value = data.avatar;
                    document.getElementsByName("text_sprites")[0].value = data.sprites;
                    document.getElementsByName("img_avatar")[0].src = data.avatar;
                    document.getElementsByName("img_sprites")[0].src = data.sprites;
                    document.getElementsByName("attributes")[0].value = data.attributes;
                    show_attributes(data.attributes)
                }
            }
        }
    </script>
</head>

<body onload="init()">
    <div id="attributes_div">
        最大生命值 (max_health)<input type="text" id="max_health"><br>
        最大魔法值 (max_mana)<input type="text" id="max_mana"><br>
        力量 (strength)<input type="text" id="strength"><br>
        敏捷 (agility)<input type="text" id="agility"><br>
        智力 (intelligence)<input type="text" id="intelligence"><br>
        防御 (defense)<input type="text" id="defense"><br>
        速度 (speed)<input type="text" id="speed"><br>
        暴击率 (critical_rate)<input type="text" id="critical_rate"><br>
        闪避率 (dodge_rate)<input type="text" id="dodge_rate"><br>
        物理攻击力(attack_power)<input type="text" id="attack_power"><br>
        魔法攻击力(magic_power)<input type="text" id="magic_power"><br>
        物理防御力(physical_defense)<input type="text" id="physical_defense"><br>
        魔法防御力(magic_defense)<input type="text" id="magic_defense"><br>
        <button onclick="commit_attributes()">提交属性</button>
    </div>
    <br>
    <form id="form" action="" method="post" enctype="multipart/form-data">
        名称：<input type="text" name="name" placeholder="name">
        称谓：<input type="text" name="title" placeholder="title">
        描述：<textarea name="description"></textarea>
        属性：<textarea name="attributes"></textarea>
        头像：<img src="" alt="" name="img_avatar" width="45" height="45"><input type="file" name="avatar" id="avatar">
        <input type="text" name="text_avatar" hidden>
        动画帧：<img src="" alt="" name="img_sprites" width="45" height="45"><input type="file" name="sprites" id="sprites">
        <input type="text" name="text_sprites" hidden>
        <button type="submit">提交</button>
    </form>
</body>

</html>